<template>
    <div>
        <div class="tt-content">
            <div class="tt-content-item item0">标题</div>
            <div class="tt-content-item item1"></div>
            <div class="tt-content-item item2"></div>
        </div>
        123
        <n-select :options="options" :render-label="renderLabel"></n-select>
    </div>
</template>
<script setup>
import { h } from "vue";

const options = [
    { value: "/static/icon/物流业.png", label: "物流业" },
    { value: "/static/icon/移动基站.png", label: "移动基站" },
    { value: "/static/icon/银行.png", label: "银行" },
    { value: "/static/icon/应急.png", label: "应急" },
];

const renderLabel = (option) => {
    return h("div", { class: "select-label-content" }, [
        h("div", { class: "select-label-content-img" }, [
            h("img", { src: option.value }),
        ]),
        h("span", option.label),
    ]);
};
</script>
<style lang="less" scoped>
.tt-content {
    transform-style: preserve-3d;
    position: relative;
    // padding: 20px;
    transform: rotateX(10deg) rotateY(-20deg);
    width: 80px;
    height: 32px;
    margin: 16px 0;
    &-item {
        position: absolute;
        -webkit-box-reflect: below 4px
            linear-gradient(transparent, rgba(0, 0, 0, 0.2));
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 32px;
        outline: 1px solid transparent;
        border-radius: 1px;
        &.item0 {
            background: var(--primary-color);
        }
        &.item1 {
            background: var(--success-color);
            transform: translateZ(-20px);
        }
        &.item2 {
            background: var(--warning-color);
            transform: translateZ(-40px);
        }
    }
}
</style>
